<template>
  <van-row class="footer">
    <van-col span="3">
      <div class="names">
        <div class="name">
          {{
            playList.length === 0 || currentIndex === -1
              ? ""
              : playList[currentIndex].name
          }}
        </div>
        <div class="name">
          {{
            playList.length === 0 || currentIndex === -1
              ? ""
              : playList[currentIndex].artist
          }}
        </div>
      </div>
    </van-col>
    <van-col span="4">
      <div
        class="cd"
        :style="{
          backgroundImage: `url(${
            playList.length === 0 || currentIndex === -1
              ? ''
              : playList[currentIndex].pic_url
          })`,
        }"
        @click="player()"
      ></div>
    </van-col>
    <van-col span="10">
      <div class="song" v-if="lyricIndex % 2 !== 0">
        <div class="lyric">
          <p>
            {{ lyricArr[lyricIndex + 1] }}
          </p>
        </div>
        <div class="lyric current">
          <p>{{ lyricArr[lyricIndex] }}</p>
        </div>
      </div>
      <div class="song" v-else>
        <div class="lyric current">
          <p>{{ lyricArr[lyricIndex] }}</p>
        </div>
        <div class="lyric">
          <p>
            {{ lyricArr[lyricIndex + 1] }}
          </p>
        </div>
      </div>
    </van-col>
    <van-col span="3">
      <div class="pause">
        <img
          v-show="isPlay"
          @click="pause()"
          src="~assets/imgs/global/start.svg"
        />
        <img
          v-show="!isPlay"
          @click="play()"
          src="~assets/imgs/global/pause.svg"
        />
      </div>
    </van-col>
    <van-col span="3">
      <div class="next">
        <img @click="next()" src="~assets/imgs/global/next.svg" alt="" />
      </div>
    </van-col>
  </van-row>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PlayMusic",
  data() {
    return {};
  },

  methods: {
    //打开歌曲详情页
    player() {
      if (this.currentIndex !== -1) {
        this.$parent.player = true;
      } else {
        return false;
      }
    },
    async play() {
      //如果是初始页面，则默认播放第一首歌曲
      if (this.currentIndex === -1) {
        await this.$store.dispatch("musicInit", 0);
      }
      //否则播放新歌曲
      else {
        this.$store.commit("start", this.currentIndex);
      }
    },
    pause() {
      this.$store.commit("pause");
    },
    async next() {
      if (this.currentIndex === this.playList.length - 1) {
        await this.$store.dispatch("musicInit", 0);
      } else {
        await this.$store.dispatch("musicInit", this.currentIndex + 1);
      }
    },
  },
  computed: mapState([
    "playList",
    "currentIndex",
    "isPlay",
    "lyricArr",
    "lyricIndex",
  ]),
};
</script>

<style lang="less" scoped>
.footer {
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 1rem;
  background-color: #f3f3f2;
  .names {
    max-width: 2rem;
    line-height: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .name {
      flex: 1;
      display: inline;
      /*文本强制不换行*/
      white-space: nowrap;
      /*文本溢出显示省略号*/
      text-overflow: ellipsis;
      /*溢出的部分隐藏*/
      overflow: hidden;
      text-align: center;
      flex-wrap: nowrap;
    }
  }
  .cd {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    bottom: 0.2rem;
    border-radius: 50%;
    box-shadow: 1px 1px 1px black;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: roucir 6s linear infinite;
  }
  .song {
    display: flex;
    height: 1rem;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    .lyric {
      flex: 1;
      opacity: 0.5;
      font-size: 0.25rem;
      line-height: 0.5rem;
    }
    .lyric:nth-child(1) {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      align-self: flex-start;
    }
    .lyric:nth-child(2) {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      align-self: flex-end;
    }
    .current {
      opacity: 1;
      font-weight: 800;
      transition-duration: 0.1s;
      transform: scale(1.01);
    }
  }
  .pause {
    margin: 0.25rem;
    width: 0.53rem;
  }
  .next {
    margin: 0.25rem;
    width: 0.53rem;
  }
}
</style>
